<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>猜拳</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
        
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            
            #body{
                width: 100%;
                height: 700px;
                max-width: 500px;
                margin: 0 auto;
                background-color: #FAE738;
                overflow: hidden;
            }
            
            #tips{
                margin-top: 40px;
                text-align: center;
                color: white;
                font-size: 36px;
                font-weight: bold;
            }
            
            #imgs{
                width: 90%;
                margin: 20px auto;
                display: flex;
                justify-content: space-around;
            }
            
            #jieguo{
                width: 90%;
                margin: 30px auto;
                display: flex;
                justify-content: space-around;
            }
            
            #jieguo .jieguo div{
                height: 30px;
                width: 89px;
                line-height: 30px;
                text-align: center;
                color: white;
            }
            
            #jieguo .jieguo img{
                height: 89px;
            }
            
            #jieguo .pk{
                height: 120px;
                line-height: 120px;
                font-size: 48px;
                font-weight: bold;
            }
            
            #score,#scoreFen{
                text-align: center;
                font-size: 24px;
                color: red;
                padding-top: 10px;
            }
            
        </style>
    </head>
    <body>
        <div id="body">
            <div id="tips">
                请选择
            </div>
            
            <div id="imgs">
                <img src="image/jiandao.png" id="jiandao" />
                <img src="image/shitou.png" id="shitou" />
                <img src="image/bu.png" id="bu" />
            </div>
            
            <div id="jieguo">
                <div class="jieguo">
                    <div>您选择了</div>
                    <img src="image/wenhao.png" id="myImg" />
                </div>
                
                <div class="pk">PK</div>
                
                <div class="jieguo">
                    <div>系统选择了</div>
                    <img src="image/wenhao.png" id="computer" />
                </div>
            </div>
            
            <div id="score">
                等待结果中....
            </div>
            
            <div id="scoreFen">
                <span>00</span>：<span>00</span>
            </div>
        </div>
        
        <script type="text/javascript" src="../libs/jquery.min.js" ></script>
        <script type="text/javascript">
            $("#imgs img").click(function(){
            //console.log($(this).attr("src"));    //点击获取img的src
            var src1=$(this).attr("src");
            //console.log(src1);
            imgSrc(src1);    //调用函数
        });
        var imgs=["image/jiandao.png","image/shitou.png","image/bu.png"];
        function imgSrc(src1){
            $("#myImg").attr("src",src1);
            
            var id=setInterval(function(){
                var num=parseInt(Math.random()*3);
                //console.log(num);
                $("#computer").attr("src",imgs[num]);
            },20);
        
            setTimeout(function(){
                clearInterval(id);
                
                var my=imgs.indexOf(src1);
                var com=imgs.indexOf($("#computer").attr("src"));
                if(my==0&&com==2 || my==1&&com==0 || my==2&&com==1){
                    $("#score").html("恭喜您赢了");
                    var count=parseInt($("#scoreFen span:eq(0)").text())+1;//每赢一次分数加1
                    count=count<10?"0"+count:count;
                    $("#scoreFen span:eq(0)").text(count);//显示分数
                }else if(my==0&&com==0 || my==1&&com==1 || my==2&&com==2){
                    $("#score").html("平局！再战一轮吧！");
                }else{
                    $("#score").html("哈哈你输啦！！！");
                    var cf = parseInt($("#scoreFen span:eq(1)").text())+1;
                    cf = cf<10 ? "0"+cf : cf;
                    $("#scoreFen span:eq(1)").text(cf);
                }
                
            },500);
        }
        </script>
    </body>
</html>